<template>
	<view :style="{height:windowHeight+'px'}" class="content">
		<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="片区巡检计划详情" @clickLeft="back" />
		<view>
			<uni-forms ref="baseForm" :modelValue="baseFormData"  style="padding: 0.5rem;" label-width='80px'>
				<uni-section class="mb-10" title="基本信息"  type="line" titleFontSize="16px">
					<uni-forms-item label="执行人员"  required>
						<uni-easyinput v-model="baseFormData.name" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" required>
						<uni-easyinput v-model="baseFormData.age" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="位置坐标" required>
						<uni-easyinput v-model="baseFormData.age" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="天气情况" required>
						<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
					</uni-forms-item>
				</uni-section>
				<uni-section class="mb-10" title="巡检进度"  type="line" titleFontSize="16px">
					<view class="viewList">
						<view class="oneDiv">
							<view class="oneOne">
								<text>1</text>
							</view>
							<view class="blueLine"></view>
						</view>
						<view class="twoDiv">
							<view class="flex-b">
								<view>
									<text class="fontWeight">设备厂家</text>
								</view>
								<view>
									<uni-data-checkbox v-model="baseFormData.status" :localdata="statusN" />
								</view>
							</view>
							
							<view>
								<view style="margin-top: 1rem;">描述：</view>
								<view style="margin-top: 1rem;">
									<uni-easyinput type="textarea" v-model="baseFormData.introduction" rows='5' placeholder="请输入相关内容" />
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="viewList">
						<view class="oneDiv">
							<view class="oneOne">
								<text>2</text>
							</view>
							<view class="blueLine"></view>
						</view>
						<view class="twoDiv">
							<view class="flex-b">
								<view>
									<text class="fontWeight">站点设备情况</text>
								</view>
								<view>
								
								</view>
							</view>
							
							<view>
								<view style="margin-top: 1rem;">
									<uni-data-checkbox v-model="baseFormData.hobby"  :localdata="hobbys" />
								</view>
								<view style="margin-top: 1rem;">
									<view style="margin-top: 1erm;">
										图片：
										 <view class="image-list">
											<view class="image-item" v-for="(item,index) in array" :key="index">
												<view class="image-content">
													<image style="width: 100px; height:100px; background-color: #eeeeee;" :mode="item.mode" :src="src"
														@error="imageError"></image>
												</view>
											</view>
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="viewList">
						<view class="oneDiv">
							<view class="oneOne">
								<text>3</text>
							</view>
							<view class="blueLine"></view>
						</view>
						<view class="twoDiv">
							<view class="flex-b">
								<view>
									<text class="fontWeight">垃圾站整体情况</text>
								</view>
								<view>
									<uni-data-checkbox v-model="baseFormData.status" :localdata="statusN" />
								</view>
							</view>
							
							<view>
								<view style="margin-top: 1rem;">描述：</view>
								<view style="margin-top: 1rem;">
									<uni-easyinput type="textarea" v-model="baseFormData.introduction" rows='5' placeholder="请输入相关内容" />
								</view>
							</view>
						</view>
					</view>
				</uni-section>
		
				<view style="height: 50px;"></view>
			</uni-forms>
		</view>
			
		<view class="btnStyle">
			<view class="btnDiv">
				<button type="primary" plain="true">发布</button>
				<button plain="true">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				
				windowHeight: 700,
				imgList: [],
			// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 0,
					status: 0,
					hobby: 0,
					datetimesingle: 1627529992399,
					value:0
				},
				range: [
				  { value: 0, text: "区域一" },
				  { value: 1, text: "区域二" },
				  { value: 2, text: "区域三" },
				],
				// 单选数据源
								sexs: [{
									text: '晴',
									value: 0
								}, {
									text: '多云',
									value: 1
								}, {
									text: '雨（雪）',
									value: 2
								}],
								// 单选数据源
								statusN: [{
									text: '正常',
									value: 0
								}, {
									text: '异常',
									value: 1
								}],
				// 多选数据源
							hobbys: [{
								text: '正常运行',
								value: 0
							}, {
								text: '设备停运',
								value: 1
							}, {
								text: '耗材不足',
								value: 2
							}, {
								text: '无信号',
								value: 3
							}, {
								text: '其他异常情况',
								value: 4
							}],
			
			  array: [{
			                mode: 'scaleToFill',
			                text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
			            }],
						  src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		
			callPhone() {
		      // 电话号码为示例，请替换为实际需要拨打的电话号码
		      uni.makePhoneCall({
		        phoneNumber: '13462013124', // 电话号码
		        success: function () {
		          console.log('拨号成功');
		        },
		        fail: function () {
		          console.log('拨号失败');
		        }
		      });
		    },
		
			change(e) {
				console.log("e:", e);
			  },
		
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.btnStyle{
			position: fixed;bottom: 0rem;width: 100%;display: flex;    align-items: center;padding: 1rem 0;
			justify-content: center;
			background-color: white;
			.btnDiv{
				width: 80%;
				display: flex;
				button{
					flex: 1;
					grid-column: 1;
					margin: 0 5px;
				}
			}
		}
		.ml5{
			display: inline-block;margin-left: 1rem;
		}
		.fontWeight{
			font-weight: bold;
		}
		.viewList{
			display: flex;
			width: 100%;
			height:13rem ;
			.oneDiv{
				width: 5%;
				height: 100%;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
				.oneOne{
					width: 1.5rem;
					height: 10%;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						display: block;
						width: 1.2rem;
						height: 1.2rem;
						border-radius: 50%;
						background-color: #0289FF;
						color: white;
						text-align: center;
					}
				}
				.blueLine{
					width: 0.01rem;
					height: 90%;
					// background-color: #0289FF;
					border: 1px solid #0289FF;
				}
			}
			.twoDiv{
				width: 95%;
				height: 100%;
				padding:0 1rem;
			}
		}
		.flex-b{
			display: flex;
			align-items: center;
			justify-content: space-between;
			view{
				flex: 1;
			}
		}

	}
</style>
